<template>
  <!-- 退出登录按钮 -->
  <view class="butIcon">
    <image
      src="@/static/icon/set-wite.png"
      class="icon"
      mode="scaleToFill"
      @tap.stop="show = !show"
    />
    <uni-transition :show mode-class="fade">
      <view class="ejectCard" v-show="show">
        <view class="subscript"></view>
        <view class="main" @tap.stop="exitLogin">
          <image src="@/static/icon/signout.png" mode="scaleToFill" />
          退出登录
        </view>
      </view>
    </uni-transition>
  </view>
  <view @tap="show = false" v-if="show" class="mask"> </view>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/stores/modules/user'
const userStore = useUserStore()
import { ref } from 'vue'
let show = ref(false)

const exitLogin = () => {
  show.value = false
  uni.showModal({
    title: '退出登录',
    content: '确定退出登录吗',
    success: function (res) {
      if (res.confirm) {
        userStore.exitLogin()
        uni.reLaunch({
          url: '/pages/login/login',
        })
      }
    },
  })
}
</script>
<style lang="scss">
.mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
.butIcon {
  position: relative;
  width: 24px;
  height: 24px;
  .ejectCard {
    position: absolute;
    top: 32px;
    right: -10px;
    z-index: 99;
    width: 110px;
    padding: 0 12px;
    background-color: #373737;
    border-radius: 6px;
    color: #ffffff;
    .subscript {
      position: absolute;
      top: -12px;
      right: 16px;
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-bottom-color: #373737;
    }
    .main {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 46px;
      image {
        width: 14px;
        height: 14px;
      }
    }
  }
}
</style>
